<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="">

  <meta name="author" content="Dashboard">

  <meta name="keyword"

        content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

  <title>Web</title>

  <!-- Bootstrap core CSS -->

  <link href="assets/css/bootstrap.css" rel="stylesheet">

  <!--external css-->

  <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>

  <link rel="stylesheet" type="text/css" href="assets/css/zabuto_calendar.css">

  <link rel="stylesheet" type="text/css" href="assets/js/gritter/css/jquery.gritter.css"/>

  <link rel="stylesheet" type="text/css" href="assets/lineicons/style.css">

  <!-- Custom styles for this template -->

  <link href="assets/css/style.css" rel="stylesheet">

  <link href="assets/css/style-responsive.css" rel="stylesheet">

  <script src="assets/js/chart-master/Chart.js"></script>

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


  <![endif]-->
  <style>
    .table tr td {
      text-align: center;
      height: 50px;
      line-height: 50px !important;
      padding: 0px !important;
      box-sizing: border-box;
    }

    .table tr th {
      text-align: center;
      height: 38px;
      line-height: 36px !important;
      padding: 0px !important;
      box-sizing: border-box;
    }
  </style>

</head>


<body>
<section id="container">
  <header class="header black-bg">
    <div class="sidebar-toggle-box">
      <div class="fa fa-bars tooltips" data-placement="right"
           data-original-title="Toggle Navigation"></div>
    </div>
    <a href="index.html" class="logo"><b>奥维</b></a>
  </header>

  <!--左边导航-->
  <aside>
    <div id="sidebar" class="nav-collapse ">
      <!-- sidebar menu start-->
      <ul class="sidebar-menu" id="nav-accordion">
        <p class="centered"><a href="profile.html"><img src="assets/img/ui-sam.jpg"
                                                        class="img-circle" width="60"></a></p>
        <h5 class="centered">奥维</h5>
        <li class="mt">
          <a class="active" href="#">
            <i class="fa fa-dashboard"></i>
            <span>用户管理</span>
          </a>
        </li>
        <li class="sub-menu">
          <a href="#" class="xiangmu">
            <i class="fa fa-desktop"></i>
            <span>项目管理</span>
          </a>
        </li>
        <li class="sub-menu">
          <a href="#">
            <i class="fa fa-cogs"></i>
            <span>任务管理</span>
          </a>
        </li>
      </ul>
    </div>
  </aside>
  <!--main content start-->
  <section id="main-content">
    <section class="wrapper" style="width: 100%;height: 578px;background: #fff;margin-top: 60px;">
      <div class="management people" style="display: none;">
        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
               style="width: 100% ;min-width: 1100px; margin-top:20px;">
          <tr>
            <th style="width:20%">ID</th>
            <th style="width:20%">姓名</th>
            <th style="width:20%">账号</th>
            <th style="width:20%">操作</th>
          </tr>
          <tr v-for="(user, index) in userList">
            <td v-text="user.id"></td>
            <td v-text="user.name"> </td>
            <td v-text="user.username"></td>
            <td>
              <button type="button" class="btn btn-info" data-toggle="modal"  data-target=".bs-example-modal-lg" @click="baby(user.id)">详情</button>
              <button type="button" class="btn btn-warning"   data-target=".bs-example-modal-lg-update"  data-toggle="modal" @click="updatebaby(user.id)">修改</button>
              <button type="button" class="btn btn-danger" @click="deteleUserById(user.id)">删除</button>
            </td>
          </tr>

        </table>
        <div class="modal fade bs-example-modal-lg " tabindex="-1"  role="dialog" aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">个人信息</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">姓名:</label>
                    <input type="text" class="form-control" id="my_name" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">账号:</label>
                    <input type="text" class="form-control" id="my_username" disabled>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--        <button type="button" class="btn btn-primary">Send message</button>-->
              </div>
            </div>
          </div>
        </div>
        <!-- 人的修改-->


        <div class="modal fade bs-example-modal-lg-update " tabindex="-1"  role="dialog" aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" >修改个人信息</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">姓名:</label>
                    <input type="text" class="form-control" v-model="update_name">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">密码:</label>
                    <input type="text" class="form-control" v-model="my_password">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="userInfo(my_id)">确认</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="project" id="project" style="display: none;">



        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
               style="width: 100% ;min-width: 1100px; margin-top:20px;">
          <tr>
            <th style="width:12%">项目名</th>
            <th style="width:12%">创建人</th>
            <th style="width:14%">描述</th>
            <th style="width:14%">创建时间</th>
            <th style="width:14%">交付时间</th>
            <th style="width:14%">任务状态</th>
            <th style="width:20%">操作</th>
          </tr>
          <tr v-for="(project,index) in projectList">
            <td v-text="project.pname"></td>
            <td v-text="project.uname"></td>
            <td v-text="project.about"></td>
            <td v-text="project.create_time"></td>
            <td v-text="project.lead_time "></td>
            <td v-if="project.state=='0'">已完成</td>
            <td v-if="project.state=='1'">未完成</td>
            <td v-if="project.state=='2'">已取消</td>
            <td>
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#projectModal" @click="projectDetail(project.id)">详情</button>
              <button type="button" class="btn btn-warning">修改</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </table>
      </div>
      <div class="mission">
        <div style="margin-top:10px;height:90px;width:100%;background-color:#F0F0F0;">
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>创建者:</td>
                <td><input type="text" class="form-control "  placeholder="请输入..."></td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>项目:</td>
                <td>  <select class="form-control">
                  <option>--请选择--</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select></td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>项目:</td>
                <td>  <select class="form-control">
                  <option value="">--请选择--</option>
                </select></td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>与我相关:</td>
                <td>
                  <select class="form-control">
                    <option value="">--请选择--</option>
                    <option value="1">我参与</option>
                    <option value="0">我创建</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>时间排序:</td>
                <td>
                  <select class="form-control">
                    <option value="">--请选择--</option>
                    <option value="lead_time ">交付时间</option>
                    <option value="create_time ">创建时间</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>排序方式:</td>
                <td>
                  <select class="form-control">
                    <option value="">--请选择--</option>
                    <option value="1">降序</option>
                    <option value="0">升序</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>任务状态:</td>
                <td>
                  <select class="form-control">
                    <option value="">--请选择--</option>
                    <option value="0">未完成</option>
                    <option value="1">已完成</option>
                    <option value="2">已取消</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div style="margin-top:10px;height:30px;width:100%;">

          <button type="button" class="btn btn-primary" style="float:right;">添加</button>
        </div>
        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
               style="width: 100% ;min-width: 1100px; margin-top:10px;">
          <tr>
            <th style="width:11%">任务ID</th>
            <th style="width:11%">内容</th>
            <th style="width:11%">创建者</th>
            <th style="width:11%">交付时间</th>
            <th style="width:11%">状态</th>
            <th style="width:11%">修改人</th>
            <th style="width:11%">修改时间</th>
            <th style="width:11%">参与人</th>
            <th style="width:11%">操作</th>
          </tr>
        </table>
      </div>
    </section>
  </section>
  <!--footer start-->
  <!--  <footer class="site-footer">
      版权所有：奥维信息科技有限公司 © Copyright 2017
    </footer>-->
</section>

<!--  人的详情 -->




<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="assets/js/jquery.sparkline.js"></script>


<script src="js/vue.min.js"></script>

<!--common script for all pages-->
<script src="assets/js/common-scripts.js"></script>
<script type="text/javascript" src="assets/js/gritter/js/jquery.gritter.js"></script>
<script type="text/javascript" src="assets/js/gritter-conf.js"></script>
<!--script for this page-->
<script src="assets/js/sparkline-chart.js"></script>
<script src="assets/js/zabuto_calendar.js"></script>
<script src="js/server-url.js"></script>
<script type="application/javascript">
  $(function () {
    $('')
  })
  var app2 = new Vue({
    el: '.people',
    data: {
      message: '页面加载于 ',
      userList:[],
      my_name:"",
      my_username:"",
      my_password:"",
      my_id:"",
      update_name:"",
      update_password:""
    },
    created:function () {
      var _this=this;
      _this.findUserList();
    },
    methods:{
      findUserList:function () {
        var _this=this;
        var _success=function (_data) {
          _this.userList=_data.data;
        }
        var _error=function (_data) {
          alert(_data.message)
        }
        UntilAjax("user/getList",'get','',_success,_error);
      },
      baby:function (_id) {
        var _this=this;
        var uid=_id;
        var data={
          uid:uid
        }
        var _success=function (_data) {
          _this.my_name=_data.data.name;
          $('#my_name').val(_this.my_name);
          _this.my_username=_data.data.username;
          $('#my_username').val(_this.my_username)
        }
        var _error=function (_data) {

        }
        UntilAjax("user/get",'get',data,_success,_error);
      },
      updatebaby:function (_id) {
        var _this=this;
        var uid=_id;
        var data={
          uid:uid
        }
        var _success=function (_data) {
          _this.update_name=_data.data.name;
          _this.my_id=_data.data.id
        }
        var _error=function (_data) {

        }
        UntilAjax("user/get",'get',data,_success,_error);
      },
      userInfo:function(){
        var _this=this;
        var _success=function (_data) {
          alert(_data.message);
          $('.bs-example-modal-lg-update').modal('hide');
          _this.findUserList();
        }
        var _error=function (_data) {
          alert(_data.message)
          console.log(app2.data)
        }
        var data={
          uid:_this.my_id,
          name:_this.update_name,
          password:_this.update_password
        }
        UntilAjax("user/set","post",data,_success,_error);
      },
      deteleUserById:function (_id) {
        var _this=this;
        var _success=function (_data) {
          alert(_data.message);
          $('bs-example-modal-lg-update').modal('hide');
          _this.findUserList();
        }
        var _error=function (_data) {
          alert(_data.message)
        }
        UntilAjax("user/rm",'get',{uid:_id},_success,_error);
      }

    }
  })


  /*(document).ready(function () {
   return false;
   });*/
  /*项目管理方法*/
  $(".xiangmu").on('click',function(){
    $('.management').hide();
    $('.mission').hide();
    var project = new Vue({
      el: '#project',
      data: {
        projectList: [],//项目列表
      },
      created:function () {
        var self = this;
        self.getProjectList();
      },
      methods:{
        /*项目列表*/
        getProjectList:function () {
          var self = this;
          $.ajax({
            url:'projects/getList',
            method:'GET',
            data:{},
            success:function (data) {
              console.log('项目列表',data);
              if(data.code==1){
                self.projectList = data.data.list;
                console.log('projectList',self.projectList);
              }else{

              }
            }
          });
        },
        /*项目详情*/
        projectDetail:function (param) {
          alert(param);
        },
      },
    });
  });


</script>
<style>
  .btn{
    padding: 4px 15px!important;
  }

</style>
</body>
</html>